<template>
  <div class="note-box" style="display: flex; flex-direction: column">
    <h2 class="note-title">写笔记</h2>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
      />
      <Editor
        @onFocus="handleFocus"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        @onCreated="handleCreated"
        style="height: 250px; width: 100%"
      />
    </div>

    <div class="note-bottom" style="">
      <div class="note-bottom-switch">
        <el-checkbox
          v-model="checked"
          label="公开笔记"
          style="height: 24px; width: 24px"
          size="large"
        />
      </div>
      <div class="note-bottom-sub">
        <el-button type="success" @click="submitNote">提交</el-button>
      </div>
    </div>
    <div note-tabs>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="我的笔记" name="first">
          <div class="note-list" id="note-list" ref="noteList">
            <li v-html="rawHtml"></li>
          </div>
        </el-tab-pane>
        <el-tab-pane label="同学笔记" name="second">Config</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import {
  onBeforeUnmount,
  ref,
  shallowRef,
  onMounted,
  watchEffect,
  nextTick,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor, IDomEditor } from "@wangeditor/editor";
import { IToolbarConfig } from "@wangeditor/editor";

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("<p>hello</p>");

let rawHtml = ref("");

const checked = ref(true);

const activeName = ref("first");

//声明属性
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

console.log(props.modelValue);
//当属性变化时，自动赋值给valueHtml
// watchEffect(() => {
//   //右边是监听的，右边只要变化，重新赋值
//   valueHtml.value = props.modelValue;
// });

//valueHtml.value = props.modelValue

//声明事件消息
const emits = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();

// 模拟 ajax 异步获取内容
// onMounted(() => {
//   setTimeout(() => {
//     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
//   }, 1500)
// })

const mode = ref("default");

/* 工具栏配置 */
const toolbarConfig: Partial<IToolbarConfig> = {
  toolbarKeys: [
    "codeBlock",
    "bold", // 加粗
    "italic", // 斜体
    "uploadImage", // 上传图片
    "bulletedList", // 无序列表
    "numberedList", // 有序列表
    "undo", // 撤销
    "redo", // 重做
    "clearStyle", // 清除格式
  ],
};

const editorConfig = { placeholder: "请输入内容..." };

const handleFocus = (editor: IDomEditor) => {
  // console.log("进入焦点", editor);
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const submitNote = () => {
  rawHtml.value = valueHtml.value;
};

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  // Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，
  //原因是在created()钩子函数执行的时候DOM其实并未进行渲染，而此时进行DOM操作是徒劳的，
  //所以一定要将DOM操作的js代码放到Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

  nextTick(() => {
    const editor = editorRef.value;
    const toolbar = DomEditor.getToolbar(editor);
    450696490;
    //console.log(toolbar);
    const curToolbarConfig = toolbar?.getConfig();
    console.log(curToolbarConfig); // 当前菜单排序和分组
  });
};
</script>
<style scoped lang="less">
.note-box {
  height: 100vh;
  padding: 10px;
  overflow: auto;
  .note-title {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 700;
  }
  .note-bottom {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}
</style>
